<!-- src/views/CourseDebugView.vue -->
<template>
  <Layout>
    <div class="debug-container">
      <h1>🔍 课程管理页面诊断</h1>
      
      <div class="diagnostic-section">
        <h2>1. 组件状态检查</h2>
        <div class="status-grid">
          <div class="status-item" :class="componentMounted ? 'success' : 'error'">
            <span>组件挂载状态:</span>
            <strong>{{ componentMounted ? '✅ 已挂载' : '❌ 未挂载' }}</strong>
          </div>
          <div class="status-item" :class="apiCalled ? 'success' : 'error'">
            <span>API调用状态:</span>
            <strong>{{ apiCalled ? '✅ 已调用' : '❌ 未调用' }}</strong>
          </div>
          <div class="status-item" :class="courses.length > 0 ? 'success' : 'error'">
            <span>数据加载状态:</span>
            <strong>{{ courses.length > 0 ? `✅ ${courses.length}条数据` : '❌ 无数据' }}</strong>
          </div>
        </div>
      </div>

      <div class="diagnostic-section">
        <h2>2. 原始数据展示</h2>
        <button @click="loadCourses" class="test-btn">手动加载数据</button>
        
        <div v-if="loading" class="loading">⏳ 加载中...</div>
        
        <div v-else>
          <h3>API响应数据:</h3>
          <pre class="data-display">{{ apiResponse }}</pre>
          
          <h3>解析后的课程数据:</h3>
          <pre class="data-display">{{ courses }}</pre>
        </div>
      </div>

      <div class="diagnostic-section">
        <h2>3. 简单表格测试</h2>
        <table v-if="courses.length > 0" class="simple-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>课程代码</th>
              <th>课程名称</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="course in courses" :key="course.id">
              <td>{{ course.id }}</td>
              <td>{{ course.courseCode }}</td>
              <td>{{ course.courseName }}</td>
              <td>{{ course.status === 1 ? '启用' : '禁用' }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else>暂无数据可显示</p>
      </div>

      <div class="diagnostic-section">
        <h2>4. 路由和样式测试</h2>
        <p>当前路由: <code>{{ $route.path }}</code></p>
        <p>路由名称: <code>{{ $route.name }}</code></p>
        
        <div class="style-test">
          <div class="test-box red">红色测试框</div>
          <div class="test-box green">绿色测试框</div>
          <div class="test-box blue">蓝色测试框</div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import { ref, onMounted } from 'vue';
// import { useRoute } from 'vue-router';
import Layout from '@/components/Layout.vue';
import { courseApi } from '@/api/course';

export default {
  name: 'CourseDebugView',
  components: {
    Layout
  },
  setup() {
    // const route = useRoute();
    const courses = ref([]);
    const loading = ref(false);
    const componentMounted = ref(false);
    const apiCalled = ref(false);
    const apiResponse = ref(null);

    const loadCourses = async () => {
      loading.value = true;
      apiCalled.value = true;
      
      try {
        console.log('🔍 开始加载课程数据...');
        const response = await courseApi.getCourses({ current: 1, size: 10 });
        console.log('📦 完整API响应:', response);
        
        apiResponse.value = response.data;
        
        if (response.data.code === '000000') {
          const responseData = response.data.data;
          console.log('📊 响应数据:', responseData);
          
          // 多种数据解析方式测试
          if (responseData && Array.isArray(responseData.data)) {
            courses.value = responseData.data;
            console.log('✅ 方式1解析成功:', courses.value.length, '条数据');
          } else if (Array.isArray(responseData)) {
            courses.value = responseData;
            console.log('✅ 方式2解析成功:', courses.value.length, '条数据');
          } else if (responseData && typeof responseData === 'object') {
            // 尝试遍历对象属性找到数组
            for (const key in responseData) {
              if (Array.isArray(responseData[key])) {
                courses.value = responseData[key];
                console.log('✅ 方式3解析成功:', courses.value.length, '条数据');
                break;
              }
            }
          } else {
            console.warn('⚠️ 无法解析的数据结构');
            courses.value = [];
          }
        } else {
          console.error('❌ API返回错误:', response.data.msg);
          courses.value = [];
        }
      } catch (error) {
        console.error('💥 加载课程数据失败:', error);
        courses.value = [];
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      componentMounted.value = true;
      console.log('🎯 CourseDebugView组件已挂载');
      loadCourses();
    });

    return {
      courses,
      loading,
      componentMounted,
      apiCalled,
      apiResponse,
      loadCourses
    };
  }
};
</script>

<style scoped>
.debug-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.diagnostic-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.status-item {
  padding: 15px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-item.success {
  background: #e8f5e9;
  border: 1px solid #4caf50;
}

.status-item.error {
  background: #ffebee;
  border: 1px solid #f44336;
}

.test-btn {
  background: #2196f3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 15px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.data-display {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 12px;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.simple-table th,
.simple-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.simple-table th {
  background: #f0f0f0;
}

.style-test {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.test-box {
  padding: 15px;
  color: white;
  border-radius: 4px;
  text-align: center;
}

.test-box.red { background: #f44336; }
.test-box.green { background: #4caf50; }
.test-box.blue { background: #2196f3; }
</style>